<template>
  <div id="container">
    <div>
      <el-row>
        <el-col :xs="24" :sm="24">
          <div class="content">
            <div>
              <div  class="tag-hot">
                <span class="tag-hot-1">语言种类：</span>
                <section>
                  <el-checkbox v-model="language.language1" label="备选项1" border size="small">Java</el-checkbox>
                  <el-checkbox v-model="language.language2" label="备选项2" border size="small">前端</el-checkbox>
                  <el-checkbox v-model="language.language3" label="备选项3" border size="small">Python</el-checkbox>
                  <el-checkbox v-model="language.language4" label="备选项4" border size="small">C语言</el-checkbox>
                </section>

              </div>
            </div>
          </div>
          <div class="content">
            <div>
              <div  class="tag-hot">
                <span class="tag-hot-1">文章类型：</span>
                <section>
                  <el-checkbox v-model="article1" label="备选项1" border size="small">1</el-checkbox>
                  <el-checkbox v-model="article2" label="备选项2" border size="small">2</el-checkbox>
                  <el-checkbox v-model="article3" label="备选项3" border size="small">3</el-checkbox>
                  <el-checkbox v-model="article4" label="备选项4" border size="small">4</el-checkbox>
                  <el-checkbox v-model="article5" label="备选项5" border size="small">5</el-checkbox>
                </section>

              </div>
            </div>
          </div>
          <div class="content">
            <div>
              <div  class="tag-hot">
                <span class="tag-hot-1">通用标签：</span>
                <section>
                  <el-checkbox v-model="tag1" label="备选项1" border size="small">热门</el-checkbox>
                  <el-checkbox v-model="tag2" label="备选项2" border size="small">最新</el-checkbox>
                  <el-checkbox v-model="tag3" label="备选项3" border size="small">最多评论</el-checkbox>
                </section>

              </div>
            </div>
          </div>

        </el-col>
      </el-row>
      <!--        <tags />-->
      <articleA :mytest="sur"></articleA>
      <page></page>
      <moreA/>
    </div>
  </div>
</template>

<script>

  export default {
    data(){
      return{
        language:{
          language1:1,
          language2:2,
          language3:3,
          language4:4,
        },
        article:{
          article1:1,
          article2:2,
          article3:3,
          article4:4,
          article5:5,
        },
        sur:{
          title:'最新资源',
          mytest:'1222',
        },
      }
    }
  }
</script>

<style lang="scss" scope>
  .content {
    border: 1px solid #e4e4e4;
    //   height: 20px;
    //   background-color: #65f;
    margin: 10px;
    border-radius: 5px;
  }
  .el-checkbox{
    margin: 0 0 5px;
  }
  .tag-hot{
    font-size: 13px;
    section{
      display: inline-block;
      padding: 0 0 0 20px;
    }
  }

  .tag-hot-1{
    display: inline-block;
    border-right: 1px solid #e4e4e4;
    height: 42px;
    line-height: 42px;
    padding: 0 0 0 70px;
    background-color: #f1f1f1;
    border-radius: 5px 0 0 5px;
  }


</style>
